<template>
  <div>
    <el-form size="mini" inline>
      <el-form-item>
        <el-date-picker
          v-model="formData.register_date"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          :clearable="false"
          style="width: 250px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="loadData" type="primary">搜索</el-button>
        <!--        <el-button @click="exportData" type="danger">导出</el-button>-->
      </el-form-item>
    </el-form>
    <div class="data-table">
      <table v-loading="loading">
        <thead>
        <tr>
          <th rowspan="2">
            登记人
          </th>
          <th rowspan="2">
            跟进的竞店名称
          </th>
          <th colspan="3">新增博主数量</th>

          <th :colspan="channelList.length + 1">
            来源渠道
          </th>

        </tr>
        <tr>
          <th>
            新增数量
          </th>
          <th>
            找到原博主数量
          </th>
          <th>
            未找到原博主数量
          </th>
          <th v-for="s in channelList" :key="s.value">
            {{ s.label }}
          </th>
          <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,itemIndex) in dataList" :key="itemIndex">
          <td>
            {{ item.user_name }}
          </td>
          <td>
            {{ item.store_name }}
          </td>
          <td>
            {{ item.blogger_count }}
          </td>
          <td>
            {{ item.blogger_found_count }}
          </td>
          <td>
            {{ item.blogger_not_found_count }}
          </td>
          <td v-for="s in channelList" :key="s.value">
            {{ item.channels[s.value] || 0 }}
          </td>
          <td>
            {{ item.blogger_count }}
          </td>
        </tr>
        </tbody>
      </table>
      <el-empty v-if="!dataList.length && !loading">

      </el-empty>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'
import CompetingStoreBloggerApi from '@/infra/api/mct/CompetingStoreBloggerApi'

export default {
  name: 'UserNew',
  data() {
    return {
      channelList: [],
      loading: true,
      formData: {
        register_date: [
          moment().startOf('month').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      },
      dataList: []
    }
  },
  created() {
    this.loadChannelList().then(() => {
      this.loadData()
    })
  },
  methods: {
    loadChannelList() {
      return dicApi.allOptions(SysDicTypeEnum.CHANNEL.id).then(data => {
        data.push({
          value: '',
          label: '其他'
        })
        this.channelList = data
      })
    },
    loadData() {
      this.loading = true
      CompetingStoreBloggerApi.userBloggerReport(this.formData).then(res => {
        this.dataList = res
      }).finally(() => {
        this.loading = false
      })
    },
    exportData() {

    }
  }
}
</script>

<style scoped>
.data-table {
  padding-bottom: 100px;
  overflow-x: auto;
  table-layout: fixed;
  white-space: nowrap;
}
</style>
